Frigjør kraften i React Server Actions for sømløs skjemabehandling og datamutasjoner på serversiden. Lær hvordan du bygger effektive, sikre og brukervennlige webapplikasjoner.
React Server Actions: En Omfattende Guide til Skjemabehandling og Serverintegrasjon
React Server Actions representerer en betydelig utvikling i hvordan vi bygger interaktive webapplikasjoner med React. De gjør det mulig for utviklere å kjøre kode på serversiden direkte fra React-komponenter, noe som effektiviserer skjemabehandling, datamutasjoner og andre serveravhengige operasjoner. Denne guiden gir en omfattende oversikt over React Server Actions, og dekker deres fordeler, implementeringsdetaljer og beste praksis.
Hva er React Server Actions?
Server Actions er asynkrone funksjoner som kjører på serveren. De kan kalles direkte fra React-komponenter, slik at du kan håndtere skjemainnsendinger, oppdatere data og utføre annen serverside-logikk uten å skrive separate API-endepunkter. Denne tilnærmingen forenkler utviklingen, reduserer JavaScript på klientsiden og forbedrer applikasjonens ytelse.
Nøkkelegenskaper ved Server Actions:
- Kjøring på serversiden: Handlinger kjører utelukkende på serveren, noe som sikrer datasikkerhet og forhindrer at sensitiv logikk blir eksponert for klienten.
- Direkte kall fra React-komponenter: Du kan kalle Server Actions direkte i komponentene dine, noe som gjør det enkelt å integrere serverside-logikk i brukergrensesnittet.
- Asynkrone operasjoner: Handlinger er asynkrone, noe som lar deg utføre langvarige oppgaver uten å blokkere brukergrensesnittet.
- Progressiv forbedring: Server Actions støtter progressiv forbedring, noe som betyr at applikasjonen din fortsatt vil fungere selv om JavaScript er deaktivert.
Fordeler med å bruke React Server Actions
Server Actions tilbyr flere overbevisende fordeler sammenlignet med tradisjonelle teknikker for datahenting og mutasjon på klientsiden:
Forenklet utvikling
Ved å eliminere behovet for separate API-endepunkter, reduserer Server Actions mengden standardkode du må skrive. Dette kan betydelig forenkle utviklingsflyten din og gjøre kodebasen mer vedlikeholdbar. I stedet for å bygge og administrere API-ruter, definerer du handlinger som er samlokalisert med komponentene som bruker dem.
Forbedret ytelse
Server Actions kan forbedre applikasjonens ytelse ved å redusere mengden JavaScript som må lastes ned og kjøres på klienten. De gjør det også mulig å utføre datatransformasjoner og validering på serveren, noe som ytterligere kan redusere arbeidsmengden på klienten. Serveren kan effektivt håndtere databehandling, noe som fører til en jevnere brukeropplevelse.
Forbedret sikkerhet
Fordi Server Actions kjører på serveren, gir de en sikrere måte å håndtere sensitive data og operasjoner på. Du kan beskytte dataene dine mot uautorisert tilgang og manipulering ved å utføre validerings- og autorisasjonskontroller på serveren. Dette legger til et sikkerhetslag sammenlignet med valideringer på klientsiden, som kan omgås.
Progressiv forbedring
Server Actions er designet for å støtte progressiv forbedring. Dette betyr at applikasjonen din fortsatt vil fungere selv om JavaScript er deaktivert eller ikke lastes inn. Når JavaScript ikke er tilgjengelig, vil skjemaer bli sendt inn ved hjelp av tradisjonelle HTML-skjemainnsendinger, og serveren vil håndtere forespørselen deretter. Dette sikrer at applikasjonen din er tilgjengelig for et bredere spekter av brukere, inkludert de med eldre nettlesere eller tregere internettforbindelser.
Optimistiske oppdateringer
Server Actions integreres sømløst med optimistiske oppdateringer. Du kan umiddelbart oppdatere brukergrensesnittet for å reflektere det forventede resultatet av en handling, selv før serveren har bekreftet endringen. Dette kan betydelig forbedre den opplevde responsiviteten til applikasjonen din og gi en mer flytende brukeropplevelse. Hvis operasjonen på serversiden mislykkes, kan du enkelt tilbakestille brukergrensesnittet til sin forrige tilstand.
Hvordan implementere React Server Actions
Implementering av Server Actions innebærer å definere handlingsfunksjonen, knytte den til en komponent og håndtere resultatet.
Definere en Server Action
Server Actions defineres ved hjelp av 'use server'-direktivet. Dette direktivet forteller React-kompilatoren at funksjonen skal kjøres på serveren. Her er et eksempel:
// app/actions.js
'use server'
import { cookies } from 'next/headers'
import { revalidatePath } from 'next/cache'
export async function createPost(formData) {
const title = formData.get('title')
const content = formData.get('content')
// Simuler innsetting i database
await new Promise((resolve) => setTimeout(resolve, 1000))
console.log('Post created:', { title, content })
// Revalider blogg-ruten
revalidatePath('/blog')
return { message: 'Post created successfully!' }
}
I dette eksempelet:
'use server'-direktivet indikerer atcreatePost-funksjonen skal kjøres på serveren.- Funksjonen tar et
formData-objekt som input, som inneholder dataene som er sendt inn fra skjemaet. - Funksjonen henter ut
titleogcontentfraformData. - Den simulerer en innsetting i databasen ved hjelp av
setTimeout. I en virkelig applikasjon ville du erstattet dette med din faktiske databaselogikk. - Funksjonen
revalidatePathugyldiggjør cachen for/blog-ruten, og sikrer at de nyeste dataene vises. - Funksjonen returnerer et objekt med en
message-egenskap, som kan brukes til å vise en suksessmelding til brukeren.
Bruke Server Actions i React-komponenter
For å bruke en Server Action i en React-komponent, kan du importere handlingsfunksjonen og sende den til action-propen til et <form>-element. Her er et eksempel:
// app/components/PostForm.js
import { createPost } from '../actions'
'use client'
import { useFormStatus } from 'react-dom'
function SubmitButton() {
const { pending } = useFormStatus()
return (
)
}
export default function PostForm() {
return (
)
}
I dette eksempelet:
createPost-handlingen importeres fra../actions-filen.action-propen til<form>-elementet er satt tilcreatePost-funksjonen.SubmitButton-komponenten brukeruseFormStatus-hooken for å avgjøre om skjemaet sendes inn. Den deaktiverer knappen mens skjemaet sendes inn for å forhindre flere innsendinger.
Håndtere skjemadata
Server Actions mottar automatisk skjemadata som et FormData-objekt. Du kan få tilgang til dataene ved hjelp av get-metoden til FormData-objektet. Her er et eksempel:
// app/actions.js
'use server'
export async function createPost(formData) {
const title = formData.get('title')
const content = formData.get('content')
// ...
}
I dette eksempelet blir title og content hentet ut fra formData-objektet ved hjelp av get-metoden.
Gi tilbakemelding til brukeren
Du kan gi tilbakemelding til brukeren ved å returnere en verdi fra Server Action. Denne verdien vil være tilgjengelig for komponenten som kalte handlingen. Du kan bruke denne verdien til å vise suksess- eller feilmeldinger til brukeren. Her er et eksempel:
// app/actions.js
'use server'
export async function createPost(formData) {
// ...
return { message: 'Post created successfully!' }
}
// app/components/PostForm.js
'use client'
import { useState } from 'react'
import { createPost } from '../actions'
export default function PostForm() {
const [message, setMessage] = useState(null)
async function handleSubmit(formData) {
const result = await createPost(formData)
setMessage(result.message)
}
return (
{message && {message}
}
)
}
I dette eksempelet:
createPost-handlingen returnerer et objekt med enmessage-egenskap.PostForm-komponenten brukeruseState-hooken for å lagre meldingen.handleSubmit-funksjonen kallercreatePost-handlingen og setter meldingstilstanden til verdien som returneres av handlingen.- Meldingen vises til brukeren i et
<p>-element.
Feilhåndtering
Server Actions kan kaste feil, som vil bli fanget opp av React-kjøretiden. Du kan håndtere disse feilene i komponentene dine ved å bruke en try...catch-blokk. Her er et eksempel:
// app/actions.js
'use server'
export async function createPost(formData) {
// ...
if (!title || title.length < 5) {
throw new Error('Tittelen må være minst 5 tegn lang.')
}
return { message: 'Post created successfully!' }
}
// app/components/PostForm.js
'use client'
import { useState } from 'react'
import { createPost } from '../actions'
export default function PostForm() {
const [message, setMessage] = useState(null)
const [error, setError] = useState(null)
async function handleSubmit(formData) {
try {
const result = await createPost(formData)
setMessage(result.message)
setError(null)
} catch (e) {
setError(e.message)
setMessage(null)
}
}
return (
{message && {message}
}
{error && {error}
}
)
}
I dette eksempelet:
createPost-handlingen kaster en feil hvis tittelen er mindre enn 5 tegn lang.PostForm-komponenten bruker entry...catch-blokk for å fange opp eventuelle feil som kastes avcreatePost-handlingen.- Hvis en feil fanges, vises feilmeldingen til brukeren i et
<p>-element med rød tekst.
Beste praksis for bruk av React Server Actions
For å sikre at du bruker Server Actions effektivt, bør du vurdere følgende beste praksis:
Bruk 'use server'-direktivet
Inkluder alltid 'use server'-direktivet øverst i Server Action-filene dine. Dette direktivet forteller React-kompilatoren at funksjonene i filen skal kjøres på serveren. Dette er avgjørende for sikkerhet og ytelse.
Hold handlinger små og fokuserte
Hver Server Action bør utføre én enkelt, veldefinert oppgave. Dette gjør handlingene dine enklere å forstå, teste og vedlikeholde. Unngå å lage store, monolittiske handlinger som utfører flere urelaterte oppgaver.
Valider data på serveren
Valider alltid data på serveren før du utfører noen operasjoner. Dette beskytter applikasjonen din mot ugyldige eller ondsinnede data. Bruk passende valideringsteknikker, som datavalidering, lengdekontroller og regulære uttrykk. Validering på serversiden er sikrere enn validering på klientsiden, som kan omgås.
Håndter feil elegant
Håndter alltid feil elegant i dine Server Actions. Dette forhindrer at applikasjonen din krasjer og gir en bedre brukeropplevelse. Bruk try...catch-blokker for å fange opp eventuelle unntak som kan oppstå, og gi informative feilmeldinger til brukeren.
Bruk optimistiske oppdateringer
Bruk optimistiske oppdateringer for å forbedre den opplevde responsiviteten til applikasjonen din. Oppdater umiddelbart brukergrensesnittet for å reflektere det forventede resultatet av en handling, selv før serveren har bekreftet endringen. Hvis operasjonen på serversiden mislykkes, kan du enkelt tilbakestille brukergrensesnittet til sin forrige tilstand.
Vurder mellomlagring (caching)
Vurder å mellomlagre resultatene av Server Actions for å forbedre ytelsen. Dette kan være spesielt gunstig for handlinger som utfører kostbare operasjoner eller som kalles ofte. Bruk passende mellomlagringsstrategier, som HTTP-caching eller mellomlagring på serversiden, for å redusere belastningen på serveren din.
Sikre dine Server Actions
Implementer sikkerhetstiltak for å beskytte dine Server Actions mot uautorisert tilgang og manipulering. Bruk autentisering og autorisasjon for å sikre at bare autoriserte brukere kan utføre visse handlinger. Beskytt mot vanlige sikkerhetssårbarheter, som cross-site scripting (XSS) og SQL-injeksjon. Saner alltid brukerinput før du bruker det i databaseforespørsler eller andre sensitive operasjoner.
Vanlige bruksområder for React Server Actions
Server Actions er godt egnet for en rekke bruksområder, inkludert:
Skjemainnsendinger
Håndtering av skjemainnsendinger er et av de vanligste bruksområdene for Server Actions. Du kan bruke Server Actions til å behandle skjemadata, validere input og lagre data i en database. Dette eliminerer behovet for separate API-endepunkter og forenkler utviklingsflyten din. For eksempel, håndtering av brukerregistrering, kontaktskjemaer eller produktanmeldelser.
Datamutasjoner
Server Actions kan brukes til å utføre datamutasjoner, som å opprette, oppdatere eller slette data i en database. Dette lar deg oppdatere applikasjonens data som svar på brukerhandlinger. Eksempler inkluderer oppdatering av brukerprofiler, adding av kommentarer eller sletting av innlegg.
Autentisering og autorisasjon
Server Actions kan brukes til å håndtere autentisering og autorisasjon. Du kan bruke Server Actions til å verifisere brukerlegitimasjon, utstede tokens og beskytte sensitive ressurser. Dette sikrer at bare autoriserte brukere har tilgang til visse deler av applikasjonen din. For eksempel, implementering av inn-/utloggingsfunksjonalitet, håndtering av brukerroller eller autorisering av tilgang til spesifikke funksjoner.
Sanntidsoppdateringer
Selv om Server Actions ikke er sanntidsbaserte i seg selv, kan de kombineres med andre teknologier, som WebSockets, for å gi sanntidsoppdateringer til applikasjonen din. Du kan bruke Server Actions til å utløse hendelser som deretter kringkastes til tilkoblede klienter via WebSockets. Tenk på live chat-applikasjoner, samarbeidende dokumentredigering eller sanntids-dashboards.
Hensyn til internasjonalisering (i18n)
Når du utvikler applikasjoner med Server Actions for et globalt publikum, er internasjonalisering (i18n) avgjørende. Her er noen viktige hensyn:
Lokalisering av feilmeldinger
Sørg for at feilmeldinger som returneres av Server Actions er lokalisert til brukerens foretrukne språk. Dette gir en bedre brukeropplevelse og gjør det enklere for brukere å forstå og løse eventuelle problemer. Bruk i18n-biblioteker for å administrere oversettelser og dynamisk vise meldinger basert på brukerens locale.
Formatering av dato og tall
Formater datoer og tall i henhold til brukerens locale. Ulike locales har forskjellige konvensjoner for å vise datoer, tall og valutaer. Bruk i18n-biblioteker for å formatere disse verdiene riktig basert på brukerens locale.
Håndtering av tidssoner
Når du håndterer datoer og tider, vær oppmerksom på tidssoner. Lagre datoer og tider i UTC-format og konverter dem til brukerens lokale tidssone når de vises. Dette sikrer at datoer og tider vises riktig uavhengig av brukerens plassering. For eksempel, planlegging av arrangementer eller visning av tidsstempler.
Valutakonvertering
Hvis applikasjonen din håndterer valutaer, må du tilby funksjonalitet for valutakonvertering. La brukere se priser i sin lokale valuta. Bruk en pålitelig valutakonverterings-API for å sikre at valutakursene er oppdaterte. Dette er spesielt viktig for e-handelsapplikasjoner og finansielle tjenester.
Støtte for høyre-til-venstre (RTL)
Hvis applikasjonen din støtter språk som skrives fra høyre til venstre (RTL), som arabisk eller hebraisk, må du sørge for at brukergrensesnittet ditt er riktig speilvendt for disse språkene. Dette inkluderer speiling av layout, tekstretning og ikoner. Bruk CSS logiske egenskaper for å lage layouter som tilpasser seg forskjellige tekstretninger.
Eksempler på React Server Actions i globale applikasjoner
Her er noen eksempler på hvordan React Server Actions kan brukes i globale applikasjoner:
E-handelsplattform
- Legge til et produkt i handlekurven: En Server Action kan brukes til å legge til et produkt i brukerens handlekurv. Handlingen kan validere produkt-ID, sjekke lagernivåer og oppdatere handlekurven i databasen.
- Behandle en bestilling: En Server Action kan brukes til å behandle en bestilling. Handlingen kan validere brukerens betalingsinformasjon, beregne fraktkostnader og opprette en bestilling i databasen.
- Abonnere på et nyhetsbrev: En Server Action kan håndtere abonnementer på nyhetsbrev, validere e-postadresser og legge dem til i abonnementslisten.
Sosiale medier-plattform
- Poste en kommentar: En Server Action kan brukes til å poste en kommentar på et innlegg. Handlingen kan validere kommentarteksten, knytte den til innlegget og lagre den i databasen.
- Like et innlegg: En Server Action kan brukes til å like et innlegg. Handlingen kan oppdatere antall likes for innlegget og lagre liken i databasen.
- Følge en bruker: Server Actions kan håndtere følgeforespørsler, håndtere brukerblokkering og oppdatere følgertall.
Reisebestillingsapplikasjon
- Søke etter flyreiser: Server Actions kan brukes til å spørre om flytilgjengelighet basert på destinasjon og datoer. Handlingen kan kalle eksterne API-er, filtrere resultater og presentere alternativer for brukeren.
- Reservere et hotellrom: Server Actions kan håndtere hotellbestillinger, bekrefte romtilgjengelighet og behandle betalingsdetaljer.
- Anmelde reisemål: En server action kan håndtere adding og behandling av brukeranmeldelser og rangeringer.
React Server Components vs. Server Actions
Det er viktig å forstå forskjellen mellom React Server Components og Server Actions, da de ofte jobber sammen, men tjener forskjellige formål:
React Server Components
React Server Components er komponenter som rendres på serveren. De lar deg hente data, utføre logikk og rendre UI-elementer på serveren, noe som kan forbedre ytelsen og redusere mengden JavaScript som må lastes ned og kjøres på klienten. Server Components er primært for å rendre brukergrensesnitt og hente innledende data.
Server Actions
Server Actions er asynkrone funksjoner som kjører på serveren som svar på brukerinteraksjoner, som skjemainnsendinger. De er primært for å håndtere datamutasjoner, utføre serverside-logikk og gi tilbakemelding til brukeren. Server Actions kalles fra klientkomponenter, vanligvis som svar på skjemainnsendinger eller andre brukerhendelser.
Nøkkelforskjeller:
- Formål: Server Components er for å rendre brukergrensesnitt, mens Server Actions er for å håndtere datamutasjoner.
- Kjøring: Server Components rendres på serveren under den første sidelastingen, mens Server Actions kalles fra klientkomponenter som svar på brukerinteraksjoner.
- Dataflyt: Server Components kan hente data direkte fra serveren, mens Server Actions mottar data fra klienten via skjemainnsendinger eller andre brukerhendelser.
Hvordan de fungerer sammen:
Server Components og Server Actions kan brukes sammen for å bygge interaktive webapplikasjoner. Server Components kan rendre det første brukergrensesnittet og hente innledende data, mens Server Actions kan håndtere datamutasjoner og gi tilbakemelding til brukeren. For eksempel kan en Server Component rendre et skjema, og en Server Action kan håndtere skjemainnsendingen og oppdatere dataene i databasen.
Konklusjon
React Server Actions tilbyr en kraftig og effektiv måte å håndtere skjemabehandling, datamutasjoner og andre serverside-operasjoner i dine React-applikasjoner. Ved å utnytte Server Actions kan du forenkle utviklingsflyten, forbedre applikasjonsytelsen, øke sikkerheten og gi en bedre brukeropplevelse. Etter hvert som du bygger stadig mer komplekse webapplikasjoner, vil forståelse og bruk av React Server Actions bli en essensiell ferdighet for moderne React-utviklere.
Husk å følge beste praksis som er skissert i denne guiden for å sikre at du bruker Server Actions effektivt og sikkert. Ved å omfavne Server Actions kan du frigjøre det fulle potensialet til React og bygge høytytende, brukervennlige webapplikasjoner for et globalt publikum.